<template>
  <div>
    <span style="padding-right: 10px;">{{allFileUploaded ? $t('yes') : $t('no')}}</span>
    <a @click="detailVisible = true">查看</a>
    <a-modal
      v-model="detailVisible"
      :title="taskName + ' 报告详情'"
      width="1000px"
      dialogClass="createFormStyle"
      :bodyStyle="{ height: '500px', overflowY: 'auto' }"
    >
      <template slot="footer">
        <a-button @click="detailVisible = false" type="primary">{{ $t('back') }}</a-button>
      </template>
      <div>
        <a-row>
          <a-col>
            <div class="ant-form-item-label">
              <label>{{$t('升级准入证明')}}</label>
              <template v-if="upgradeAccessProve.length > 0">({{upgradeAccessProve.length}}个)</template>
            </div>
            <FileUploader v-model="upgradeAccessProve" read-only/>
          </a-col>
<!--          <a-col v-for="cfg in taskFileConfig">-->
          <a-col v-for="(cfg,key) in taskFileConfig" :key="key">
            <div class="ant-form-item-label">
              <label>{{$t(cfg.name)}}</label>
              <template v-if="fileInfo[cfg.key].length > 0">({{fileInfo[cfg.key].length}}个)</template>
            </div>
            <!--          :label="$t('不上传'+ cfg.name +'原因')"-->
            <div v-if="taskGcyExt[cfg.boolKey] === false || taskGcyExt[cfg.key]=='null'">
              未上传：{{taskGcyExt[cfg.reasonKey]}}
            </div>
            <div v-else>
              <FileUploader v-model="fileInfo[cfg.key]" @change="taskGcyExt[cfg.key] = $event" read-only/>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>
<script>
  import FileUploader from '@/components/Upload/FileUploader'
  import {mapState} from "vuex";
  import fileApi from '@/api/modules/system/fileUpload'

  export default {
    name: 'taskGcyUploadInfo',
    components: {
      FileUploader
    },
    props: {
      taskName: {
        type: String,
        default() {
          return ''
        }
      },
      taskGcyExt: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      ...mapState({
        taskFileConfig: (state) => state.newTask.taskFileConfig,
      }),
      /**
       *
       * @returns boolean 报告是否上传完整
       */
      allFileUploaded() {
        return this.taskGcyExt.upTestDeptVerifyReport &&
          this.taskGcyExt.uploadChannelReport &&
          this.taskGcyExt.uploadFunctionTestReport &&
          this.taskGcyExt.uploadProductTestReport &&
          this.taskGcyExt.uploadReleaseBill &&
          this.taskGcyExt.uploadSupplierTestReport &&
          this.taskGcyExt.upgradeAccessProve 
      },
      /**
       * 附件文件信息
       * @returns {{}}
       */
      fileInfo(){
        let obj = {}
        this.taskFileConfig.forEach(cfg => {
          obj[cfg.key] = this.getFileInfoByIds(this.taskGcyExt[cfg.key]);
        })
        return obj;
      },
      /**
       * 准入证明文件信息
       * @returns {[]}
       */
      upgradeAccessProve() {
        return this.taskGcyExt.upgradeAccessProve instanceof Array ? this.taskGcyExt.upgradeAccessProve
          : this.getFileInfoByIds(this.taskGcyExt.upgradeAccessProve);
      }
    },
    data() {
      return {
        detailVisible: false,
        fileInfoMap: {}
      }
    },
    watch:{
      taskGcyExt() {
        this.initFileInfo();
      }
    },
    mounted() {
      this.initFileInfo();
    },
    methods:{
      initFileInfo() {
        let ids = [];
        let map = {};
        if (this.taskGcyExt.upgradeAccessProve) {
          ids = ids.concat(this.taskGcyExt.upgradeAccessProve instanceof Array ?
            this.taskGcyExt.upgradeAccessProve.map(a => a.id) : this.taskGcyExt.upgradeAccessProve.split(","));
        }
        this.taskFileConfig.forEach(cfg => {
          if (this.taskGcyExt[cfg.key] && !(this.taskGcyExt[cfg.key] instanceof Array)) {
            ids = ids.concat(this.taskGcyExt[cfg.key].split(","));
          }
        })
        if (ids.length === 0) {
          return;
        }
        fileApi.getFileInfo(ids).then(res => {
          if (!res.data) {
            return;
          }
          res.data.forEach(file => {
            map[file.id] = file;
          });
          this.fileInfoMap = Object.assign({}, map)
        });
      },
      getFileInfoByIds(idStr) {
        if (!idStr || idStr instanceof Array) {
          return [];
        }
        return idStr.split(",").map(id => this.fileInfoMap[id]).filter(id => !!id);
      }
    }
  }

</script>
<style lang="less" scoped>
  .ant-form-item-label label{
    font-size: 1.2rem;
    font-weight: bold;
    color: #5e5e5e;
  }
</style>